<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魅族</title>
    <link rel="shortcut icon" href="../favicon-90c2e618ff.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/pc_common.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/api.js"></script>

</head>

<body>
    <!-- ************** 头部内容区 start ************** -->
    <div class="MZ_header">
        <div class="header">
            <a href="../html/index1.html" >
                <div class="log"></div>
            </a>
        </div>
    </div>
    <!-- ************** 头部内容区 end ************** -->


    <!-- ************** 中部内容区 start ************** -->
    <div class="MZ_middle">
        <div class="middle">
            <div class="boss">
                <div class="top">
                    注册Flyme账号
                </div>
                <div class="formbox">
                    <form class="form" onsubmit="return false" autocomplete="on">
                        <p>
                            <label>用户名:
                                <input class="user" type="text" placeholder="请设置用户名">
                            </label>
                            <span class="user_span"></span>
                        </p>
                        <p>
                            <label>密&emsp;码:
                                <input class="pwd" type="password" placeholder="请设置密码">
                            </label>
                            <span class="pwd_span"></span>
                        </p>
                        <p>
                            <label>手机号:
                                <input class="phone" type="text" placeholder="请输入手机号">
                            </label>
                            <span class="phone_span"></span>
                        </p>
                        <p>
                            <label>验证码:
                                <input class="code" type="text" placeholder="请输入验证码">
                            </label>
                            <span class="createCode">1234</span>
                            <span class="code_span"></span>
                        </p>
                        <p>
                            <label class="msg">
                                <input type="checkbox" class="isRem">注册账号即表示您同意并愿意遵守<a
                                    href="https://i.flyme.cn/serviceAgreement" target="_blank"
                                    class="linkABlue">Flyme账号服务协议</a> 、<a href="http://www.meizu.com/legal.html"
                                    target="_blank" class="linkABlue">法律声明</a>和<a href="https://i.flyme.cn/privacy"
                                    target="_blank" class="linkABlue">隐私政策</a>
                            </label>
                        </p>
                        <div class="btn">
                            立即注册
                        </div>
                    </form>
                </div>
                <p>
                    <a href="../html/login.html">登录</a>
                </p>
            </div>
        </div>
    </div>
    <!-- ************** 中部内容区 end ************** -->


    <!-- ************** 尾部内容区 start ************** -->
    <div class="MZ_footer">
        <div class="footer">
            <div class="top">
                <ul>
                    <li>
                        <a href="javascript:;">关于魅族</a>
                    </li>
                    <li>
                        <a href="javascript:;">工作机会</a>
                    </li>
                    <li>
                        <a href="javascript:;">联系我们</a>
                    </li>
                    <li>
                        <a href="javascript:;">法律声明</a>
                    </li>
                    <li>
                        <a href="javascript:;">常见问题</a>
                    </li>
                    <li>
                        <a href="javascript:;">简体中文</a>
                    </li>
                </ul>
                <div class="phone">
                    <span>客服热线</span>
                    <span>400-788-3333</span>
                </div>
                <div class="sbox">
                    在线客服
                </div>

                <div class="icon">
                    <a href="https://weibo.com/meizumobile">
                        <span class="i1"></span>
                    </a>

                    <div class="ibox">
                        <span class="i2"></span>
                        <div class="QR">
                            <img src="../images/QR.jpg" alt="">
                        </div>
                    </div>

                    <a href="https://user.qzone.qq.com/2762957059">
                        <span class="i3"></span>
                    </a>
                </div>

            </div>
            <div class="bottom">
                <p>©2021 Meizu Telecom Equipment Co., Ltd. All rights reserved.备案号: 粤ICP备13003602号-4经营许可证编号:
                    粤B2-20130198营业执照</p>
            </div>
        </div>
    </div>
    <!-- ************** 尾部内容区 end ************** -->
</body>

<script>
    // //点击log跳转首页
    // $(".header .log").click(function () {
    //     location.href = "index1.html";
    // })


    //随机验证码
    $(".createCode").html(randCode()); //刷新即随机
    //点击产生随机
    $(".createCode").click(function () {
        $(".createCode").html(randCode())
    })

    //验证前先把Flag全设为false，验证通过变为true,全验证成功跳转登录页
    var userFlag = false;
    var pwdFlag = false;
    var phoneFlag = false;
    var codeFlag = false;

    //校验用户名
    $(".user").blur(function () {
        var userVal = this.value.trim();
        //console.log(user);
        // 每次验证之前先重置为false
        userFlag = false;
        //进行正则判断
        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        if (reg.test(userVal)) {

            //promise + api 的方法  api是对ajax的二次封装

            isExist({
                user: userVal,
            }).then((result) => {
                var {
                    status,
                    detail
                } = result;
                if (status) {
                    $(".user_span").html("奈斯哦，是可以使用的用户名呢").css({
                        color: "green"
                    })
                    userFlag = true;
                } else {
                    $(".user_span").html(detail).css({
                        color: "red"
                    })
                }
            }).catch(err => {
                throw err;
            })


            // $.ajax({
            //     type:"get",
            //     url: "../php/isExist.php",
            //     data: { user:userVal }, // {user: user},
            //     async:true,
            //     dataType: "json",
            //     success: function (result) { // result 形参 接口返回的数据
            //         var { status, detail } = result;
            //         if (status) {
            //             $(".user_span").html("奈斯哦，是可以使用的用户名呢").css({
            //             color: "green"
            //         })
            //         userFlag = true;
            //         } else {
            //             $(".user_span").html(detail).css({
            //             color: "red"
            //         })
            //         }
            //     }
            // })
        } else {
            $(".user_span").html("用户名由数字,字母,下划线,$组成 6-12位,不能以数字开头").css({
                color: "red"
            })
        }
    })


    //校验密码
    $(".pwd").blur(function () {
        var pwdVal = this.value.trim();
        pwdFlag = false;
        var reg = /^[\w$]{6,12}$/;
        if (reg.test(pwdVal)) {

            var numFlag = false;
            var smallFlag = false;
            var bigFlag = false;
            var speFlag = false;

            var numReg = /[0-9]/;
            var smallReg = /[a-z]/;
            var bigReg = /[A-Z]/;
            var speReg = /[_$]/;

            if (numReg.test(pwdVal)) {
                numFlag = true;
            }
            if (smallReg.test(pwdVal)) {
                smallFlag = true;
            }
            if (bigReg.test(pwdVal)) {
                bigFlag = true;
            }
            if (speReg.test(pwdVal)) {
                speFlag = true;
            }

            var sum = numFlag + smallFlag + bigFlag + speFlag;

            $(".pwd_span").html("密码强度:" + sum).css({
                color: "green"
            })
            pwdFlag = true;
        } else {
            $(".pwd_span").html("密码由数字,字母,下划线,$组成 6-12位").css({
                color: "red"
            })
        }
    })


    //校验手机号
    $(".phone").blur(function () {
        var phoneVal = this.value.trim();
        phoneFlag = false;
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(phoneVal)) {

            // promise + api 的方法
            isExist({
                phone: phoneVal,
            }).then((result) => {
                var {
                    status,
                    detail
                } = result;
                if (status) {
                    $(".phone_span").html("请稍等，貂蝉正在骑马来的路上").css({
                        color: "green"
                    });
                    phoneFlag = true;
                } else {
                    $(".phone_span").html(detail).css({
                        color: "red"
                    })
                }
            }).catch((err) => {
                throw err;
            })


        } else {
            $(".phone_span").html("这有啥保密的，说出来也不会有人打扰你").css({
                color: "red"
            })
        }
    })


    //校验验证码
    $(".code").blur(function () {
        var codeVal = this.value.trim();
        var _rand = $(".createCode").html();
        var reg = new RegExp(_rand, "i");
        codeFlag = false;
        if (codeVal) {
            if (reg.test(codeVal)) {
                $(".code_span").html("干的漂亮，对狙成功").css({
                    color: "green"
                })
                codeFlag = true;
            } else {
                $(".code_span").html("喂，看哪呢？瞄错啦！").css({
                    color: "red"
                })
            }
        } else {
            $(".code_span").html("请瞄准在发射!!!").css({
                color: "red"
            })
        }
    })


    //跳转登录页面
    $(".btn").click(function () {
        if (userFlag && pwdFlag && phoneFlag && codeFlag) {

            var user = $(".user").val().trim();
            var pwd = $(".pwd").val().trim();
            var phone = $(".phone").val().trim()

            if ($(".isRem").is(":checked")) {

                //promise + api 的方法
                register({
                    user,
                    pwd,
                    phone
                }).then((result) => {
                    var {
                        status,
                        detail
                    } = result;
                    if (status) {
                        alert("恭喜您,注册成功")
                        location.href = "login.html"
                    }else{
                        alert(detail)
                    }
                }).catch((err) => {
                    throw err;
                })

            }
        } else {
            alert("注册未完成")
        }
    })
</script>

</html>